<!--
 * @Description: 自定义组件v-model
 * @Author: zyj
 * @Date: 2022-06-13 11:18:50
 * @LastEditors: zyj
 * @LastEditTime: 2022-07-07 10:07:38
-->
<template>
  <div>
    <ul class="list">
      <li class="item flex f-x-b f-y-c" v-for="item in data" :key="item.id" @click="chooseItem(item.id)">
        <p>{{ item.id }}：{{ item.name }}</p>
        <i v-if="item.id == checkedId" class="el-icon-check"></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    checkedId: {
      type: [Number, String],
      default: ''
    }
  },
  model: {
    prop: 'checkedId',
    event: 'change'
  },
  data() {
    return {}
  },
  methods: {
    chooseItem(id) {
      this.$emit('change', id)
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 10px;
  width: 300px;
  border: 1px solid #eee;
  border-radius: 10px;
  .item {
    cursor: pointer;
    line-height: 38px;
    border-bottom: 1px solid #eee;
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>